#body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 557.33333vw;
  background: #00193d;
  color: #fff;
  font-size: 3.2vw;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}

html,
body {
  overflow-x: hidden;
}

.cell {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.hide {
  display: none !important;
}

.sink {
  z-index: 998 !important;
}

.btn {
  font-weight: 700;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  width: 28.53333vw;
  height: 6.26667vw;
  background: url(../images/btn.png);
  background-size: 100% 100%;
  text-decoration: none;
  color: inherit;
  font-size: 2.6vw;
}

.btn.ios {
  margin: 0 auto;
}

.btn.ios .icon {
  width: 3.73333vw;
  height: 4.53333vw;
  background: url(../images/i_ios.png);
  background-size: 100% 100%;
}

.btn.android {
  margin: 0.8vw auto 0 auto;
}

.btn.android .icon {
  width: 3.73333vw;
  height: 4vw;
  background: url(../images/i_and.png);
  background-size: 100% 100%;
}

.btn.gold {
  background: url(../images/btn_.png);
  background-size: 100% 100%;
  margin: 0.8vw auto 0 auto;
  color: #83781c;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.btn.ed {
  background: url(../images/btn_get.png);
  background-size: 100% 100%;
  margin: 0.8vw auto 0 auto;
  color: #ebebe7;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.btn .icon {
  display: inline-block;
  margin-left: 3.46667vw;
}

.btn .os-txt {
  text-align: center;
  width: 19.2vw;
}

.header {
  float: left;
  width: 100%;
  height: 85.06667vw;
  background: url(../images/header.jpg);
  background-size: 100% 100%;
}

.header .logo {
  position: absolute;
  width: 21.73333vw;
  height: 13.33333vw;
  background: url(../images/logo.png);
  background-size: 100% 100%;
  top: 2.13333vw;
  left: 50%;
  margin-left: -10.86667vw;
}

.header .interactive {
  margin-top: 46.13333vw;
}

.header .interactive .logged {
  width: 100%;
  color: #000;
  font-size: 2.3vw;
  font-weight: 700;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.header .interactive .logged .item {
  margin: 2.4vw 1vw;
}

.wrap {
  float: left;
  width: 100%;
  height: 464vw;
  background: url(../images/line.jpg);
  background-size: 100%;
  margin-top: -1px;
}

.wrap .item {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.wrap .title {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 95.84vw;
  height: 5.46667vw;
  background: url(../images/title.png) 6vw 0 no-repeat;
  background-size: 83.33333vw;
  margin: -2.13333vw auto;
  font-size: 2.6vw;
}

.wrap .title:before {
  content: '';
  padding-left: 2.13333vw;
}

.wrap .title .title-txt {
  margin-top: -.88vw;
}

.wrap .loader {
  width: 75.86667vw;
  height: 3.73333vw;
  background: url(../images/loader0.jpg);
  background-size: 100% 100%;
  margin-top: 4vw;
}

.wrap .pbs {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 73.46667vw;
}

.wrap .pbs .item {
  position: relative;
  width: 34.66667vw;
  height: 34.66667vw;
  margin-left: 4vw;
  margin-top: 1.33333vw;
}

.wrap .pbs .item:first-child, .wrap .pbs .item:nth-child(3) {
  margin-left: 0;
}

.wrap .pbs .item .item-desc {
  width: 100%;
  position: absolute;
  bottom: 2.4vw;
  height: 8vw;
}

.wrap .pbs .item .item-desc .cell {
  display: flex;
  display: -webkit-flex;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 3vw;
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
}

.wrap .btn.gold,
.wrap .btn.ed {
  margin-top: 6.13333vw;
}

.wrap .bot {
  margin-top: 2.4vw;
}

.wrap .bot .loader {
  width: 78.4vw;
  height: 13.46667vw;
  background: url(../images/loader1.jpg);
  background-size: 100% 100%;
}

.wrap .event2 {
  position: relative;
  margin-top: 14.93333vw;
}

.wrap .event2 .widget {
  width: 12.53333vw;
  height: 12vw;
  background: url(../images/widget.png);
  background-size: 100% 100%;
  position: absolute;
  top: -14vw;
  z-index: 999;
  right: 12vw;
}

.wrap .event2 .loader {
  margin-top: 4vw;
  width: 79.2vw;
  height: 11.33333vw;
  background: url(../images/loader2.jpg);
  background-size: 100% 100%;
}

.wrap .event2 .myPrize {
  margin-top: 5.33333vw;
  color: #3079c5;
  font-weight: 700;
}

.wrap .event2 .myPrize div {
  display: inline-block;
  text-decoration: underline;
}

.wrap .event2 .myPrize .lin {
  width: 1.2vw;
  height: 1.6vw;
  background: #2c99ec;
  margin: 0 1.6vw;
}

.wrap .event2 .timebar {
  font-size: 2.13333vw;
  margin-top: 4.8vw;
  width: 80vw;
  background: #29a3ff;
  display: flex;
  display: -webkit-flex;
}

.wrap .event2 .timebar .item {
  padding: 1vw;
  padding-left: 1.6vw;
  border-right: 1px solid #50b2fc;
}

.wrap .event2 .timebar .item:last-child {
  border-right: 0;
}

.wrap .event2 .timebar .gray {
  color: #bdddff;
}

.wrap .event2 .list {
  position: relative;
  width: 83.86667vw;
}

.wrap .event2 .list .item {
  position: relative;
  width: 26.8vw;
  height: 22.53333vw;
  float: left;
  margin-left: .76vw;
  margin-top: 8vw;
}

.wrap .event2 .list .item .pokemon-avatar {
  width: 100%;
  height: 100%;
}

.wrap .event2 .list .item .pokemon-avatar .poke-c {
  position: absolute;
  width: 8.53333vw;
  height: 6.8vw;
  background: url(../images/crown.png);
  background-size: 100% 100%;
  top: -4vw;
  left: 8.5vw;
}

.wrap .event2 .list .item .pokemon-avatar .poke-c .icon {
  position: absolute;
  width: 1.86667vw;
  height: 2.8vw;
  background: url(../images/crown-star.png);
  background-size: 100% 100%;
}

.wrap .event2 .list .item .pokemon-avatar .poke-c .icon.left {
  top: 2vw;
  left: -5vw;
}

.wrap .event2 .list .item .pokemon-avatar .poke-c .icon.right {
  top: 4.8vw;
  left: 12vw;
}

.wrap .event2 .list .item .pokemon-avatar .poke-l {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/selected.png);
  background-size: 100% 100%;
}

.wrap .event2 .list .item .pokemon-avatar .poke-g {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/gray.png);
  background-size: 100% 100%;
}

.wrap .event2 .list .item .pokemon-name {
  letter-spacing: -.2vw;
  font-size: 3.73333vw;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  width: 24.8vw;
  height: 2vw;
  background: url(../images/bkm-name.png);
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  margin-left: -12.4vw;
  padding-bottom: .8vw;
  box-sizing: border-box;
  bottom: -2vw;
}

.wrap .event2 .list .item .pokemon-name span {
  padding-right: .16vw;
  color: #3079c5;
  transform: scale(0.76);
  -webkit-transform: scale(0.76);
}

.wrap .event2 .list .item .pokemon-name.short {
  background: url(../images/bkm-name2.png);
  background-size: 100% 100%;
}

.wrap .event2 .list .item:last-child {
  margin-left: 28.4vw;
}

.wrap .event3 {
  position: relative;
  margin-top: 10.66667vw;
}

.wrap .event3 .loader {
  margin-top: 4vw;
  width: 79.06667vw;
  height: 6.26667vw;
  background: url(../images/loader3.jpg);
  background-size: 100% 100%;
}

.wrap .event3 .box {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 76%;
  justify-content: space-between;
}

.wrap .event3 .box .card {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  position: relative;
  width: 35.86667vw;
  height: 23.06667vw;
  background: url(../images/card.jpg);
  background-size: 100% 100%;
  margin: 5.41333vw 0 2.32vw 0;
  padding-top: 3vw;
  box-sizing: border-box;
}

.wrap .event3 .box .card:nth-child(1) .item {
  width: 33.06667vw;
  height: 14.53333vw;
  background: url(../images/e3_0.jpg);
  background-size: 100% 100%;
}

.wrap .event3 .box .card:nth-child(2) {
  padding-top: 1.8vw;
}

.wrap .event3 .box .card:nth-child(2) .item {
  width: 33.06667vw;
  height: 15.46667vw;
  background: url(../images/e3_1.jpg);
  background-size: 100% 100%;
}

.wrap .event3 .box .card:nth-child(3) {
  padding-top: 1.8vw;
}

.wrap .event3 .box .card:nth-child(3) .item {
  width: 33.06667vw;
  height: 15.46667vw;
  background: url(../images/e3_2.jpg);
  background-size: 100% 100%;
}

.wrap .event3 .box .card:nth-child(4) {
  padding-top: 1.4vw;
}

.wrap .event3 .box .card:nth-child(4) .item {
  width: 33.06667vw;
  height: 16vw;
  background: url(../images/e3_3.jpg);
  background-size: 100% 100%;
}

.wrap .event3 .box .card:nth-child(5) {
  padding-top: 1.5vw;
}

.wrap .event3 .box .card:nth-child(5) .item {
  width: 33.06667vw;
  height: 15.73333vw;
  background: url(../images/e3_4.jpg);
  background-size: 100% 100%;
}

.wrap .event3 .box .card:nth-child(6) {
  padding-top: 1.5vw;
}

.wrap .event3 .box .card:nth-child(6) .item {
  width: 33.06667vw;
  height: 15.86667vw;
  background: url(../images/e3_5.jpg);
  background-size: 100% 100%;
}

.wrap .event3 .box .card:nth-child(7) {
  margin-left: 18.6vw;
  padding-top: 1.5vw;
}

.wrap .event3 .box .card:nth-child(7) .item {
  width: 33.06667vw;
  height: 15.46667vw;
  background: url(../images/e3_6.jpg);
  background-size: 100% 100%;
}

.wrap .event3 .box .card .btn {
  width: 22.4vw;
  height: 6.13333vw;
  position: absolute;
  bottom: -3vw;
  left: 50%;
  margin-left: -11.2vw;
}

.footer {
  float: left;
  width: 100%;
  height: 1.2vw;
  background: url(../images/bot.jpg) no-repeat;
  background-size: 100%;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.pop {
  overflow: hidden;
  color: #54acf0;
  position: fixed;
  z-index: 999;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 86%;
  left: 50%;
  background: #cde3fd;
  border-radius: 4vw;
  border: 1.6vw solid #ffe400;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  padding: 5vw 0;
}

.pop .close {
  width: 10.4vw;
  height: 9.86667vw;
  background: url(../images/x.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.pop .x {
  width: 10.4vw;
  height: 9.86667vw;
  position: absolute;
  top: 0;
  right: 0;
}

.pop .bkm {
  position: absolute;
  width: 33.2vw;
  height: 32.53333vw;
  background: url(../images/jlq.jpg);
  background-size: 100% 100%;
  right: 1vw;
  bottom: 1vw;
}

.pop .pop-wrap {
  position: absolute;
  border-radius: 2vw;
  border: 1px dashed #98bce6;
  top: 1.2vw;
  left: 1.2vw;
  right: 1.2vw;
  bottom: 1.2vw;
}

.pop .login {
  position: relative;
}

.pop .login .btns {
  margin-top: 2vw;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
}

.pop .login .btns .btn {
  width: 34.66667vw;
  height: 7.46667vw;
  margin-top: 2vw;
}

.pop .login .btns .fb {
  background: url(../images/_btn.png);
  background-size: 100% 100%;
}

.pop .login .inputs {
  margin-top: 5vw;
}

.pop .login .inputs .input {
  width: 33.33333vw;
  height: 6.6vw;
  outline: none;
  border: 1px solid #2c9aec;
  padding: 0 2vw;
  font-size: 2.8vw;
  color: inherit;
  width: 40%;
}

.pop .login .inputs .item {
  display: flex;
  display: -webkit-flex;
  margin-top: 2.2vw;
}

.pop .login .inputs .item span {
  justify-content: flex-end;
  width: 37%;
  margin-right: 2vw;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

.pop .ctn {
  position: relative;
  text-align: center;
}

.pop .server {
  position: relative;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  padding: 1vw 0 1vw 0;
}

.pop .server .item {
  position: relative;
  margin-top: 1.5vw;
}

.pop .server .item .tip {
  position: absolute;
  left: 34vw;
  margin-left: 1vw;
  line-height: 6.6vw;
  font-size: 2vw;
}

.pop .server .item .btn {
  margin-top: 4vw;
}

.pop .server select {
  height: 6.6vw;
  outline: none;
  border: 1px solid #2c9aec;
  padding: 0 2vw;
  font-size: 2.6vw;
  color: inherit;
  width: 34vw;
}

.pop.overview {
  width: 70%;
}

.pop.overview .bkm {
  display: none;
}

.pop.overview .overview {
  position: relative;
}

.pop.overview .display-list {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.pop.overview .display-list .item {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  height: 30.4vw;
  border-bottom: 1px solid #aad3f9;
  width: 78%;
}

.pop.overview .display-list .item:nth-child(1) .pri {
  background: url(../images/e4_0.jpg);
  background-size: 100% 100%;
}

.pop.overview .display-list .item:nth-child(2) .pri {
  background: url(../images/e4_1.jpg);
  background-size: 100% 100%;
}

.pop.overview .display-list .item:nth-child(3) .pri {
  background: url(../images/e4_2.jpg);
  background-size: 100% 100%;
}

.pop.overview .display-list .title {
  width: 100%;
  text-align: center;
  margin-top: 3vw;
}

.pop.overview .display-list .pri {
  width: 43.2vw;
  height: 13.33333vw;
  margin-top: 4vw;
}

#role {
  text-align: center;
}
